<template>
  <div>
    <x-header :left-options="{backText: ''}" class="ret">
      <div class="retTitle">我的优惠券</div>
    </x-header>
    <div class="main">
      <div class="card" :style={backgroundColor:voucher.voucherInfo.bgColor}>
        <div class="sj-info">

          <img class="logo" v-lazy="voucher.seller.logoImgs">
          <p class="sj-title ">{{voucher.seller.name}}</p>
        </div>
        <div class="cart-info">
          <p class="zk-title">{{voucher.voucherInfo.mingc}}</p>
          <p class="zk-desc">{{voucher.voucherInfo.beiz}}</p>
          <p class="zk-desc">有效日期：{{voucher.kaisrqShiy |formatDate}}~{{voucher.jiesrqShiy | formatDate}}</p>
        </div>

      </div>
      <div class="cart-def" :style={backgroundColor:background}>
        <div v-show="iscart">

          <barcode :value="voucher.code" :options="{height:60,width:1.6,displayValue:false,marginBottom:1,background:background}"></barcode>
          <p class="cart-num">{{ spritStr(voucher.code) }}</p>

          <qrcode :value="voucher.code" :options="{height:200,width:1.6,displayValue:false,marginBottom:1}"></qrcode>
          <p class="cart-desc">{{ voucher.voucherInfo.beiz1 }}</p>

        </div>
        <!-- <div v-show="!iscart">
        <div class="cart-btn">
          <x-button type="primary" :style={backgroundColor:voucher.voucherInfo.bgColor} disabled>活动未开始</x-button>
        </div>

      </div> -->
      </div>

      <divider v-if="voucher.xiangxnr">备注</divider>
      <div class="cart-defxx" v-if="voucher.xiangxnr" v-html="voucher.xiangxnr">

      </div>
      <divider>购买须知</divider>
      <!--使用条件  -->
      <p v-if="voucher.voucherInfo.qiyJe>0" class="cart-det-title">使用条件</p>
      <div v-if="voucher.voucherInfo.qiyJe>0" class="cart-defxx">
        <ul>
          <li>消费满￥{{voucher.voucherInfo.qiyJe}}起用</li>
        </ul>
      </div>
      <p v-if="voucher.voucherInfo.xiaofSj" class="cart-det-title">使用时间</p>
      <div v-if="voucher.voucherInfo.xiaofSj" class="cart-defxx" v-html="voucher.voucherInfo.xiaofSj">

      </div>

      <p v-if="voucher.voucherInfo.buksyRq" class="cart-det-title">不可用日期</p>
      <div v-if="voucher.voucherInfo.buksyRq" class="cart-defxx" v-html="voucher.voucherInfo.buksyRq">

      </div>
      <p v-if="voucher.voucherInfo.shiyFw" class="cart-det-title">适用范围</p>
      <div v-if="voucher.voucherInfo.shiyFw" class="cart-defxx" v-html="voucher.voucherInfo.shiyFw">

      </div>
      <p v-if="voucher.voucherInfo.shifYy" class="cart-det-title">是否预约</p>
      <div v-if="voucher.voucherInfo.shifYy" class="cart-defxx" v-html="voucher.voucherInfo.shifYy">

      </div>
      <p v-if="voucher.voucherInfo.shiyGz" class="cart-det-title">使用规则</p>
      <div v-if="voucher.voucherInfo.shiyGz" class="cart-defxx" v-html="voucher.voucherInfo.shiyGz">

      </div>

      <divider>商家信息</divider>
      <div class="sj-defxx">
        <ul>
          <li>商家电话：{{voucher.seller.telephone}}</li>
          <li>商家地址：{{voucher.seller.address}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { XHeader, Divider, XButton, Qrcode } from "vux";
import { sign, signStr } from "@/assets/js/sign.js";

import { formatDate } from "@/assets/js/utils.js";
export default {
  components: { XHeader, Divider, XButton, Qrcode },
  data() {
    return {
      background: "#fff",
      backgroundcart: "#ffdd1d",
      iscart: true,
      voucher: null
    };
  },
  methods: {
    init() {
      let id = this.$route.params.id;

      let params = signStr("/v1/api/voucher/getYVoucherById");
      this.$http
        .get("voucher/getYVoucherById?id=" + id + "&" + params)
        .then(ret => {
          if (ret.status == 200) {
            var _data = ret.data.resultObject;
            var _code = ret.data.code || ret.data.result.code;
            var _msg = ret.data.msg || ret.data.result.msg;
            if (_code === 1) {
              this.voucher = _data;
              // console.log("data: "+JSON.stringify(this.voucher.voucherInfo))
            }
            {
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    spritStr(str) {
      let str1 = str.replace(/\s/g, "").replace(/(.{4})/g, "$1-");
      if (str1.substr(str1.length - 1, 1) == "-") {
        str1 = str1.substr(0, str1.length - 1);
      }
      return str1;
    }
  },
  created() {
    this.init();
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy.MM.dd");
    }
  }
};
</script>

<style lang="sass">
@import "~@/assets/scss/mixin.scss";
.cart-defxx 
  padding: 10px 10px 0 18px
  font-size: 14px
  line-height: 20px
  ul
    list-style-type: disc
  ol
    list-style-type: decimal
  li
    padding: 0 0 10px 0 
    margin-left: 10px

.sj-defxx
  padding: 1px 10px 0 18px
  font-size: 12px
  line-height: 16px
  ul,ol
    list-style-type: disc
  li
    padding: 0 0 10px 0 
    margin-left: 10px
</style>


<style scoped lang="less">
.main {
  padding: 10px 10px 0 10px;
  margin-top: 40px;
}

.card {
  /* 相对定位，方便让before和after伪元素绝对定位偏移 */
  position: relative;

  width: 100%;
  height: 186px;
  background-color: #ffdd1d;
  .sj-info {
    height: 60px;
    .logo {
      float: left;
      margin-left: 10px;
      margin-top: 10px;
      width: 50px;
      height: 50px;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      display: inline;
    }
    .sj-title {
      margin-left: 10px;
      line-height: 60px;
      font-size: 16px;
      color: #fff;
      display: inline;
    }
  }
  .cart-info {
    .zk-title {
      width: 100%;
      color: #fff;
      font-size: 28px;
      text-align: center;
    }
    .zk-desc {
      width: 100%;
      padding-top: 10px;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
  }
}

// .card:before,
// .card:after {
//   content: " ";
//   height: 100%;
//   /* 绝对定位进行偏移 */
//   position: absolute;
//   top: 0;
// }

// .card:before {
//   /* 圆点型的border */
//   border-right: 10px dotted white;
//   /* 偏移一个半径，让圆点的一半覆盖div */
//   left: -5px;
// }

// .card:after {
//   /* 圆点型的border */
//   border-left: 10px dotted white;
//   /* 偏移一个半径，让圆点的一半覆盖div */
//   right: -5px;
// }

.cart-def {
  text-align: center;
  width: 100%;
  height: 300px;

  .cart-num {
    font-size: 24px;
    text-align: center;
  }
  .cart-desc {
    width: 100%;
    font-size: 14px;
    text-align: center;
  }
  .cart-btn {
    padding: 40px;
  }
}
.cart-det-title {
  width: 100%;
  font-size: 14px;
  color: #ffa500;
}

.ret {
  position: fixed;
  top: 0;
  width: 100%;
  height: 40px;
  z-index: 9999999;
  background-color: #fff;
}
.retTitle {
  color: #000;
  font-size: 14px;
}
</style>
